Check file size before uploading it in Vue Uploader component

#Check file size before uploading it in Vue Uploader component | 来源: 网络整理| 查看: 265

16 Mar 20232 minutes to read

By using uploading event, you can get the file size before upload it to server. File object contains the file size in bytes only. You can convert the size to standard formats (KB or MB) using bytesToSize method.

app.vue import Vue from 'vue'; import { UploaderPlugin } from '@syncfusion/ej2-vue-inputs'; Vue.use(UploaderPlugin); export default { data: function(){ return { path: { saveUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Save', removeUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Remove' }, autoUpload: false } }, methods: { onBeforeUpload: function(args): void { // get the file size in bytes let sizeInBytes: number = args.fileData.size; // get the file size in standard format alert("File size is: " + this.$refs.uploadObj.bytesToSize(sizeInBytes)) } } } @import "../../node_modules/@syncfusion/ej2-base/styles/material.css"; @import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css"; @import "../../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css"; #container { padding-left: 5%; width: 100%; } #loader { color: #008cff; font-family: 'Helvetica Neue','calibiri'; font-size: 14px; height: 40px; left: 45%; position: absolute; top: 45%; width: 30%; }

You can also explore Vue File Upload feature tour page for its groundbreaking features. You can also explore our Vue File Upload example to understand how to browse the files which you want to upload to the server.

【本文地址】

公司简介

联系我们